<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text style-1</title>
    <link rel="stylesheet" href="../../model/element.css">
    <link rel="stylesheet" href="../../model/jsFn.css">
</head>
<body>
<div class="catalog">
    <h2>目录</h2>
    <ul>
        <li>
            <p><a href="#element">< text style="1" ></a></p>
        </li>
        <li>
            <p><a href="#attribute">属性</a></p>
            <ul>
                <li><p><a href="#example">实例</a></p></li>
                <li><p><a href="#optional">可选属性</a></p></li>
                <li><p><a href="#note">提示和注释</a></p></li>
                <li><p><a href="#sketch">效果图</a></p></li>
            </ul>
        </li>
        <li>
            <p><a href="#jsFn">js函数</a></p>
            <ul>
                <li><p><a href="#jsFn_get">get</a></p></li>
                <li><p><a href="#jsFn_set">set</a></p></li>
                <li><p><a href="#jsFn_val">val</a></p></li>
                <li><p><a href="#jsFn_background">background</a></p></li>
                <li><p><a href="#jsFn_instance">instance</a></p></li>
            </ul>
        </li>
        <li>
            <p><a href="#childElement">子标签</a></p>
            <ul>
                <li><p><a href="#childElement_lp">lp --------- 左边的文字,左边最多3个</a></p></li>
                <li><p><a href="#childElement_limg">limg ------- 左边的图片</a></p></li>
                <li><p><a href="#childElement_rp">rp -----------右边的文字,头边最多3个</a></p></li>
                <li><p><a href="#childElement_rimg">rimg --------- 他右边的图片</a></p></li>
                <li><p><a href="#childElement_cp">cp ---------中间的文字</a></p></li>
                <li><p><a href="#childElement_input">input ---------中间的输入框</a></p></li>
            </ul>
        </li>
    </ul>
</div>
<div id="element">
    <h2>text style-1</h2>
    <div>
        <p>简介:</p>
        <p>最常用标签,大多时候用在个人页面的设置按钮,关于我们按钮,首页的更多按钮</p>
    </div>
</div>
<div id="attribute">
    <h2>属性</h2>
    <div style="margin-left: 25px" id="example">
        <h3>实例:</h3>
        <xmp>
            <text height="48"  margin="14,0,16,0" click="document.open('zn.set.xml')">
                <lp font="#1a1717,16">设置</lp>
                <limg attr="21">img.center_setting.png</limg>
                <rimg attr="8,15">img.more.png</rimg>
            </text>
        </xmp>
    </div>
    <div id="optional">
        <h3>可选属性:</h3>
        <table>
            <tbody>
            <tr>
                <th>属性</th>
                <th>值</th>
                <th>描述</th>
            </tr>
            <tr>
                <td>无</td>
                <td>无</td>
                <td>无</td>
            </tr>
            </tbody>
        </table>
    </div>
    <div id="note">
        <h3>提示和注释:</h3>
        <p>默认style=1</p>
        <p>text的set方法和group的set方法不完全一样</p>
        <p>默认高度45dp</p>
        <p>宽度占满父布局</p>
    </div>
    <div id="sketch">
        <h3>效果图:</h3>
        <img src="img/text-style1.png" alt="">
        <img src="img/text-style1-2.png"  alt="">
    </div>
</div>
<div id="jsFn">
    <h2>js方法</h2>
    <div id="jsFn_get" class="jsFnModel">
        <h3>get:</h3>
        <div class="shape">
            <h3>函数使用样式:</h3>
            <p>text.get(elementName) ->string</p>
        </div>
        <div class="profile">
            <h3>函数功能简介:</h3>
            <p>获得text标签下指定子标签的文本</p>
        </div>
        <div class="version">
            <p>稳定性;2 - 稳定的</p>
            <p>新增于:v0.0.0</p>
        </div>
        <div class="params">
            <h3>参数列表:</h3>
            <ul>
                <li>
                    <p>elementName</p>
                    <p>&nbsp;string&nbsp;</p>
                    <p>子标签名</p>
                </li>
            </ul>
        </div>
        <div class="res">
            <h3>返回值</h3>
            <p>类型:string</p>
            <p>返回指定标签展示的文本信息</p>
        </div>
        <div class="code">
            <h3>例子</h3>
            <pre>
                <code>
                    < text id="text1">
                        < lp >左边文字< /lp >
                    < /text >
                    let lpText = document.$('text1').get('lp');
                    console.log('lp',lpText);
                    //控制台打印  lp:左边文字;
                </code>
            </pre>
        </div>
        <div class="error">
            <h3>抛出错误</h3>
        </div>
    </div>
    <div id="jsFn_set" class="jsFnModel">
        <h3>set:</h3>
        <div class="shape">
            <h3>函数使用样式</h3>
            <p>text1.set(args) ->text;</p>
        </div>
        <div class="profile">
            <h3>函数功能简介</h3>
            <p>指定特定的标签,给其赋值,包括文本,颜色,大小,图片路径</p>
        </div>
        <div class="version">
            <p>稳定性;2 - 稳定的</p>
            <p>新增于:v0.0.0</p>
        </div>
        <div class="params">
            <h3>参数列表</h3>
            <ul>
                <li>
                    <p>args</p>
                    <p>&nbsp;object&nbsp;</p>
                    <p>
                        格式为:{lp:{color:'#ff0000',p:'更改后的文字',size:'30'}};代表含义为 lp:指定需要更改的子标签,lp.color:文字颜色,lp.p:更改后的文本,lp.size文本大小:
                        <br/>
                        若格式为:{limg:{img:'http://xxx.jpg',attr:'50,90'};limg.img:图片路径,limg.attr:图片的宽(第一个参数),高(第二个参数),用','分开;
                        <br/>
                        若指定子标签不存在,则不执行操作
                    </p>
                </li>
            </ul>
        </div>
        <div class="res">
            <h3>返回值</h3>
            <p>text</p>
            <p>返回text本身</p>
        </div>
        <div class="code">
            <h3>例子</h3>
            <pre>
            <code>
                < text id="text1">
                    < lp >修改前文字< /lp >
                < /text >
                document.$('text1').set({lp:{p:'修改后文字'});
            </code>
        </pre>
        </div>
        <div class="error">
            <h3>抛出错误</h3>
        </div>
    </div>
    <div class="jsFnModel" id="jsFn_val">
        <h3>val:</h3>
        <div class="shape">
            <h3>函数使用样式</h3>
            <p>text.val() -> string</p>
        </div>
        <div class="profile">
            <h3>函数功能简介</h3>
            <p>获得text标签里input子标签输入框里的内容文本</p>
        </div>
        <div class="version">
            <p>稳定性;2 - 稳定的</p>
            <p>新增于:v0.0.0</p>
        </div>
        <div class="params">
            <h3>参数列表:</h3>
            <p>无</p>
        </div>
        <div class="res">
            <h3>返回值:</h3>
            <p>string</p>
            <p>返回text里input标签的文本</p>
        </div>
        <div class="code">
            <h3>例子</h3>
            <pre>
            <code>
                < text id="username">
                    < input >用户手动输入< /input >
                < /text >
                let username = document.$('username').val();
                console.log(username);
                //输入用户手动输入的文本
            </code>
        </pre>
        </div>
        <div class="error">
            <h3>抛出错误</h3>
        </div>
    </div>
        <div class="jsFnModel" id="jsFn_background">
            <h3>background:</h3>
            <div class="shape">
                <h3>函数使用样式</h3>
                <p>text.background(color) -> void</p>
            </div>
            <div class="profile">
                <h3>函数功能简介</h3>
                <p>设置text控件背景色</p>
            </div>
            <div class="version">
                <p>稳定性;2 - 稳定的</p>
                <p>新增于:v0.0.0</p>
            </div>
            <div class="params">
                <h3>参数列表:</h3>
                <ul>
                    <li>
                        <p>color</p>
                        <p>&nbsp;string&nbsp;</p>
                        <p>颜色的16进制编码</p>
                    </li>
                </ul>
            </div>
            <div class="res">
                <h3>返回值:</h3>
                <p>void</p>
                <p>无返回值</p>
            </div>
            <div class="code">
                <h3>例子</h3>
                <pre>
                <code>
                    < text id="text">
                        < lp >文字< /lp >
                    < /text >
                    document.$("text").background("#440099cc");
                </code>
                </pre>
            </div>
            <div class="error">
                <h3>抛出错误</h3>
            </div>
        </div>
            <div class="jsFnModel" id="jsFn_instance">
                <h3>instance:</h3>
                <div class="shape">
                    <h3>函数使用样式</h3>
                    <p>text.secureTextEntry() -> void</p>
                </div>
                <div class="profile">
                    <h3>函数功能简介</h3>
                    <p>设置input中的文字是否是以密码文本的方式显示</p>
                </div>
                <div class="version">
                    <p>稳定性;2 - 稳定的</p>
                    <p>新增于:v0.0.0</p>
                </div>
                <div class="params">
                    <h3>参数列表:</h3>
                    <p>无</p>
                </div>
                <div class="res">
                    <h3>返回值:</h3>
                    <p>void</p>
                    <p>无返回值</p>
                </div>
                <div class="code">
                    <h3>例子</h3>
                    <pre>
                     <code>
                        < text id="password" margin="40,0,40,0" padding="10,0,10,0" >
                            < input background="false" type="true">请输入登录密码< /input>
                            < rimg attr="17" click="document.$('password').instance();">img.loginpass.png< /rimg>
                        < /text>
                    </code>
                    </pre>
                </div>
                <div class="error">
                    <h3>抛出错误</h3>
                </div>
            </div>
</div>
<div id="childElement">
    <h2>子标签:</h2>
    <div id="childElement_lp">
        <h3>lp</h3>
        <p>text左边的文字</p>
        <p>用法参见 <a href="../p/index.html">< p ></a></p>
    </div>
    <div id="childElement_limg">
        <h3>limg</h3>
        <p>text左边的图片</p>
        <p>用法参见 <a href="../p/index.html">< img ></a></p>
    </div>
    <div id="childElement_rp">
        <h3>rp</h3>
        <p>text右边的文字</p>
        <p>用法参见 <a href="../p/index.html">< p ></a></p>
    </div>
    <div id="childElement_rimg">
        <h3>rimg</h3>
        <p>text右边的图片</p>
        <p>用法参见 <a href="../img/index.html">< img ></a></p>
    </div>
    <div id="childElement_cp">
        <h3>cp</h3>
        <p>text中间的文字</p>
        <p>用法参见 <a href="../p/index.html">< p ></a></p>
    </div>
    <div id="childElement_input">
        <h3>input</h3>
        <p>text中间输入框</p>
        <p>用法参见 <a href="../input/index.html">< input ></a></p>
    </div>
</div>
<div class="author">
    <p>by-沛华</p>
</div>
</body>
</html>